@import '../../assets/css/variables.scss';

@keyframes octocat {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(100deg);
  }
}
.login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  // background复合写法
  // background : background-color background-image background-repeat background-attachment background-position(center 110px) / background-size;
  background: #f0f2f5 url('../../assets/img/public/bg.svg') no-repeat center
    110px / 100%;

  .octo-arm {
    animation: octocat 1.1s linear infinite;
    transform-origin: 130px 106px;
  }

  .svg-wrapper {
    position: fixed;
    top: -6px;
    right: -6px;
    z-index: 999;
    fill: #20a0ff;
    color: #fff;
  }
  .main-container {
    flex: 1;
    width: 320px;
    margin-top: 90px;
  }
  .logo-wrap {
    margin-bottom: 30px;
    text-align: center;

    .logo {
      width: 120px;
      height: 120px;
      // 元素不能被拖动。
      -webkit-user-drag: none;
    }
    em {
      position: relative;
      top: 10px;
      margin-left: 15px;
      font-size: 24px;
      font-weight: 700;
      font-style: normal;
      color: #000;
    }
  }
  .captcha {
    cursor: pointer;
    height: 30px;
    border-left: 1px solid #ccc;
  }
  .register {
    margin-top: 15px;
    text-align: right;
    color: $theme-color;
  }
}
